<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html style="overflow: auto;">
<head>
	<title>sku</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="decorator" content="ani"/>
    <style>
    .layui-layer-iframe{
        qwert: 6666;
        width: 100%;
    }
    </style>
	<%@ include file="/webpage/include/bootstraptable.jsp"%>
	<%@include file="/webpage/include/treeview.jsp" %>
	<script>
        $(document).ready(function() {
            $('#skuTable').bootstrapTable({
                //请求方法
                method: 'get',
                //类型json
                dataType: "json",
                //显示刷新按钮
                showRefresh: true,
                //显示切换手机试图按钮
                showToggle: true,
                //显示 内容列下拉框
                showColumns: true,
                //显示到处按钮
                showExport: true,
                //显示切换分页按钮
                showPaginationSwitch: true,
                //最低显示2行
                minimumCountColumns: 2,
                //是否显示行间隔色
                striped: true,
                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                cache: false,
                //是否显示分页（*）
                pagination: true,
                //排序方式
                sortOrder: "asc",
                //初始化加载第一页，默认第一页
                pageNumber:1,
                //每页的记录行数（*）
                pageSize: 300,
                //可供选择的每页的行数（*）
                pageList: [300, 500, 1000, 1500],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
                url: "${ctx}/sku/sku/findRealtimeResourceAmount",
                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                //queryParamsType:'',
                ////查询参数,每次调用是会带上这个参数，可自定义
                queryParams : function(params) {
                    var searchParam = $("#searchForm").serializeJSON();
                    searchParam.skuId= searchParam.id;
                    //delete searchParam.id;
                    console.log("--",searchParam);
                    searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
                    searchParam.pageSize = params.limit === undefined? -1 : params.limit;
                    searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+  params.order;
                    return searchParam;
                },
                clickToSelect: true,
                //分页方式：client客户端分页，server服务端分页（*）
                sidePagination: "server",
               // onDblClickRow: function(row, $el){
               //     $("#id").val(row.skuId);
               // },
                columns: [{
                    checkbox: true,                
               	 }
                    ,{
                        field: 'skuId',
                        title: 'id',
                        align:'center'
                    }
                    ,{
                        field: 'productName',
                        title: '产品名称',
                        align:'center',
                        width:'45%'
                    }
                    ,{
                        field: 'amount',
                        title: '库存量',
                        align:'center'
                    }
                    ,{
                        field: '',
                        title: 'SKU类目',
                        align:'center',
                        width:'20%',
                        formatter:function(value, row , index){
                        	return row.firstType+"-"+row.secondType+"-"+row.thirdType;
                        }
                    }
                    ,{
                        field: 'remarks',
                        title: '备注信息',
                        align:'center'
                    }
                ]

            });
			

            if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){//如果是移动端
                $('#skuTable').bootstrapTable("toggleView");
            }
            $('#skuTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
                $('#remove').prop('disabled', ! $('#skuTable').bootstrapTable('getSelections').length);
                $('#edit').prop('disabled', $('#skuTable').bootstrapTable('getSelections').length!=1);
            });

            $("#search").click("click", function() {// 绑定查询按扭
                $('#skuTable').bootstrapTable('refresh');
            });

            $("#reset").click("click", function() {// 绑定查询按扭
                $("#searchForm  input").val("");
                $("#searchForm  select").val("");
                $("#searchForm  .select-item").html("");
                $('#skuTable').bootstrapTable('refresh');
            });

            $('#createDate').datetimepicker({
                format: "YYYY-MM-DD HH:mm:ss"
            });
            $('#updateDate').datetimepicker({
                format: "YYYY-MM-DD HH:mm:ss"
            });
        });

	</script>
</head>
<body style="width:100%; height:100%; overflow-y: scroll; -webkit-overflow-scrolling: touch;">
<div class="wrap">
	<div class="wrapper wrapper-content">
	<div class="panel panel-primary">
<!-- 	<div class="panel-heading">
		<h3 class="panel-title">选择需要添加的sku</h3>
	</div> -->
	<div class="panel-body">
		<sys:message content="${message}"/>

	<!-- 搜索 -->
	<div class="accordion-group">
		<div id="collapseTwo" class="accordion-body collapse">
			<div class="accordion-inner">
				<form:form id="searchForm" modelAttribute="sku" class="form form-horizontal well clearfix">
					 <div class="col-xs-12 col-sm-6 col-md-4">
						<label class="label-item single-overflow pull-left" title="id：">id：</label>
						<form:input path="id" htmlEscape="false"  class=" form-control"/>
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<label class="label-item single-overflow pull-left" title="产品名称：">sku名称：</label>
						<form:input path="productName" htmlEscape="false" maxlength="128"  class=" form-control"/>
					</div>
						
					 <div class="col-xs-12 col-sm-6 col-md-4">
						<div style="margin-top:26px">
						  <a  id="search" class="btn btn-primary btn-rounded  btn-bordered btn-sm"><i class="fa fa-search"></i> 查询</a>
						  <a  id="reset" class="btn btn-primary btn-rounded  btn-bordered btn-sm" ><i class="fa fa-refresh"></i> 重置</a>
						 </div>
				    </div>	
				</form:form>
			</div>
		</div>
	</div>
	
	<!-- 工具栏 -->
	<div id="toolbar">
	        	<a class="accordion-toggle btn btn-default" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
					<i class="fa fa-search"></i> 检索
				</a>
		    </div>
		
	<!-- 表格 -->
	<table id="skuTable"></table>

    <!-- context menu -->
    <ul id="context-menu" class="dropdown-menu">
    	<shiro:hasPermission name="sku:sku:edit">
        <li data-item="edit"><a>编辑</a></li>
        </shiro:hasPermission>
        <shiro:hasPermission name="sku:sku:del">
        <li data-item="delete"><a>删除</a></li>
        </shiro:hasPermission>
        <li data-item="action1"><a>取消</a></li>
    </ul>  
	</div>
	</div>
    </div>
</div>
</body>
</html>